<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数</title>
</head>
<body>

</body>
<script>
    {
        let arr = [11,2,3,4,5];
//        let newArr = arr.filter(function (ele, index) {
//            return ele < 4;
//        });
        let newArr = arr.filter(ele => ele < 4);
//        let newArr = arr.filter(ele => ele < 4);

        console.log(newArr);



//       isTrue?"a":"b"   三元表达式
//       ()=>{} //箭头函数   <---  java c++   ===>上下文 context
        // lambda  表达式
    }

    //箭头函数出现, 解决this指向的问题
/*    { //1. 谁调用指向谁
        let obj = {
            name: "obj",
            func: function () {
                console.log(this);   //obj
            }
        };
        obj.func();
    }
    {//2.自己调用指向window
        function func() {
            console.log("-----",this);   //window
        }
        func();

        /!*window.func = function () {

        }*!/
    }
    {//3.当函数作为构造函数的时候 this指向构造函数实例
        function Person(name) {
            this.name = name;
            this.age = "26"
        }
        Person.prototype.sayThis = function () {
            console.log("This is ==>", this);
            console.log("This name is ==>", this.name)
        };

        let person1 = new Person("obj");
        person1.sayThis();
    }

    {//4.call/apply/bind  强制改变this指向
        let obj = {
            birth: 1993,
            year: 2021,
            age: function () {
                console.log("this.year - this.birth",this.year - this.birth)
            }
        };
        obj.age(); //2012-1993
        obj.age.call({birth:0, year: 0}); //0
        obj.age.apply({birth:2000, year: 2021}); //2021-2000
    }*/


    //箭头函数原理
/*    {
        let obj = {
            name: "obj",
            func: function () {//作用域

                console.log("箭头函数原理--1->",this); //obj

                let that = this;

                function innerFunc() { //自执行函数
//                    this = that;
                    console.log("箭头函数原理--that->",that); //window
                    console.log("箭头函数原理--2->",this) //window
                }
                innerFunc()
            }
        };
        obj.func();
    }*/
    {
        let obj = {
            name: "obj",
            func: function () {//作用域

                console.log("箭头函数原理--1->",this); //obj

                let innerFunc = ()=> { //自执行函数
                    console.log("箭头函数原理--2->",this) //obj
                };
                innerFunc();

                innerFunc.call({name: "newObj"});
            }
        };
        obj.func();
    }

    //1. 箭头函数没有自己this, 它的this来自于上级作用域
    //2. 箭头函数在定义的时候它的this就被永久的确定了
    //3. 箭头函数不能作为构造函数使用

    {
        let Person = (name)=> {
            this.name = name;
            this.age = "26"
        };
     /*   Person.prototype.sayThis = function () {
            console.log("This is ==>", this);
            console.log("This name is ==>", this.name)
        };*/

        let person1 = new Person("obj");
//        person1.sayThis();
    }

    /*
    * 一、箭头函数是匿名函数，不能作为构造函数，不能使用new
    * 二、箭头函数内没有arguments，可以用展开运算符...解决
    * 三、箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象）
    * 四、箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向。(call、aaply、bind会默认忽略第一个参数，但是可以正常传参)
    * 五、箭头函数没有原型属性
    *
    * */

</script>
</html>